$namespace: 'ly';
$primary-color: var(--primary-color);


$blue: #108ee9;
$cyano: #0960bd;
$green: #009688;
$indigo: #536dfe;
$pink: #ff5c93;
$orange: #ee4f12;
$cyan: #0096c7;
$purple: #9c27b0;
$yellow: #ff9800;
$red: #dc3545;
$white: #ffffff;

// $blue: #108ee9;
// $purple: #722ED1;
// $cyan: #13C2C2;
// $green: #52C41A;
// $magenta: #EB2F96;
// $pink: #eb2f96;
// $red: #F5222D;
// $orange: #FA8C16;
// $yellow: #FADB14;
// $volcano: #FA541C;
// $geekblue: #2F54EB;
// $gold: #FAAD14;
// $lime: #A0D911;

$modes: (
    light: (
        bgColor: #fff,
        appMainBg:#ebeef5,
        infoColor: #000,
        textColor:#000000d9,
        borderColor: #f0f0f0,           
        borderColorBase:#d9d9d9,
        headerBorderBottomColor:#eee,
        headerHoverBgColor:#f6f6f6,
        siderTextColor:#000000d9,        
        siderTextColorActive: $primary-color,
        siderBgColor: #fff,
        siderBgDarkenColor:var(--sider-dark-lighten-bg-color),
        multipleTextColor:#000000d9,
        multipleBgColor:#fff,
        componentBackground:#ebeef5,
        
    ),
    dark: (
        bgColor: #000,
        appMainBg:#151515,
        infoColor: #fff,        
        textColor:#fff,
        borderColor: #343434,
        borderColorBase:#303030,
        headerBorderBottomColor:var(--header-bg-color),
        headerHoverBgColor:var(--header-bg-hover-color),
        siderTextColor:#ffffffb3,
        siderTextColorActive: #fff,
        siderBgColor:var(--sider-dark-bg-color),
        siderBgDarkenColor:var(--sider-dark-darken-bg-color),
        multipleTextColor:#fff,
        multipleBgColor:#151515,
        componentBackground:#333,
    ),
);

$colors: (
    red: (
        primary: $red,
        info: $red,
    ),
    orange: (
        primary: $orange,
        info: $orange,
    ),
    yellow: (
        primary: $yellow,
        info: $yellow,
    ),
    cyan: (
        primary: $cyan,
        info: $cyan,
    ),
    green: (
        primary: $green,
        info: $green,
    ),
    blue: (
        primary: $blue,
        info: $blue,
    ),
    purple: (
        primary: $purple,
        info: $purple,
    ),
    indigo: (
        primary: $indigo,
        info: $indigo,
    ),
    pink: (
        primary: $pink,
        info: $pink,
    ),
);

$curMode: light;
$curTheme: red;

//遍历黑白map
@mixin useTheme() {
    @each $key1, $value1 in $modes {
        $curMode: $key1 !global;
        @each $key2, $value2 in $colors {
            $curTheme: $key2 !global;
            html[data-dark='#{$key1}'][data-theme='#{""+$key2}'] & {
                @content;
            }
        }
    }
}
@mixin useThemeDark() {
    @each $key1, $value1 in $modes {
        $curMode: $key1 !global;
       html[data-dark='#{$key1}'] & {
                @content;
            }
    }
}
@function getModeVar($key) {
    $modeMap: map-get($modes, $curMode);
    @return map-get($modeMap, $key);
}

@function getColor($key) {
    $themeMap: map-get($colors, $curTheme);
    @return map-get($themeMap, $key);
}

@mixin useThemeHeader() {
    @each $key1, $value1 in $modes {
        $curMode: $key1 !global;
        .#{$namespace}-layout-header--#{$key1}{
          @content;
        }
    }
}
// @mixin useThemeSider() {
//   @each $key1, $value1 in $modes {
//     $curMode: $key1 !global;
//     @each $key2, $value2 in $colors {
//       $curTheme: $key2 !global;
//       html[data-theme='#{$key2}'] .#{$namespace}-menu-#{$key1} {
//         @content;
//       }
//     }
//   }
// }



// tabs
$multiple-height: 40px;

// headers
$header-height: 60px;

// logo width
$logo-width: 32px;

//
$side-drag-z-index: 200;
$page-loading-z-index: 10000;
$lock-page-z-index: 1000;
$layout-header-fixed-z-index: 500;
$multiple-tab-fixed-z-index: 505;
$layout-sider-fixed-z-index: 510;
$layout-mix-sider-fixed-z-index: 550;
$preview-comp-z-index: 1000;
$page-footer-z-index: 99;

// 颜色 * 尺寸 * 风格 * 其它
$text-color:#c9d1d9;
$primary-1:rgb(255 255 255 / 8%);
$text-color-base:#c9d1d9;
$text-color-label:#606266;
$component-background:#151515;
$hover-background:#333333;
$heading-color:rgb(255 255 255 / 65%);
// black: '#0e1117;
// #8b949e
$text-color-secondary:#8b949e;
$border-color-base:#303030;
$border-color-base1:#303030;
// 'border-color-split:#30363d;
$item-active-bg:#111b26;
// $app-content-background:#1e1e1e;
$app-main-background:#333333;
$tree-node-selected-bg:#11263c;
$selected-hover-bg:rgba(255, 255, 255, 0.08);

$alert-success-border-color:#274916;
$alert-success-bg-color:#162312;
$alert-success-icon-color:#49aa19;
$alert-info-border-color:#153450;
$alert-info-bg-color:#111b26;
$alert-info-icon-color:#177ddc;
$alert-warning-border-color:#594214;
$alert-warning-bg-color:#2b2111;
$alert-warning-icon-color:#d89614;
$alert-error-border-color:#58181c;
$alert-error-bg-color:#2a1215;
$alert-error-icon-color:#a61d24;



$info-color: var(--primary-color);
$processing-color: var(--primary-color);
$success-color: #55D187; //  Success color
$error-color:#ED6F6F; //  False color
$warning-color:#EFBD47; //   Warning color
$btn-info-color:#909399;
$border-color-base1:#f0f0f0;
$font-size-base:14px; //  Main font size
$border-radius-base:2px; //  Component/float fillet
$link-color: var(--primary-color); //   Link color
$app-content-background: #fafafa; //   Link color
$app-main-background:#ebeef5;
$selected-hover-bg:#f5f5f5;
$hover-background:#f5f7fa;


$white: #fff;

$content-bg: #f4f7f9;
// =================================
// ==============border-color=======
// =================================

// Dark-dark
$border-color-dark: #b6b7b9;

// Dark-light
$border-color-shallow-dark: #cececd;

// Light-dark
$border-color-light: $border-color-base;
// =================================
// ==============Text color-=============
// =================================

// Main text color
$text-color-base: $text-color;

// Label color
$text-color-call-out: #606266;
$text-color-label: #606266;

// Auxiliary information color-dark
$text-color-help-dark: #909399;

// :export {
//   name: "less";
//   mainColor: @mainColor;
//   fontSize: @fontSize;
// }
$iconify-bg-color: #5551;

// =================================
// ==============Header=============
// =================================

$header-dark-bg-color: var(--header-bg-color);
$header-dark-bg-hover-color: var(--header-bg-hover-color);
$header-light-bg-hover-color: #f6f6f6;
$header-light-desc-color: #7c8087;
$header-light-bottom-border-color: #eee;
// top-menu
$top-menu-active-bg-color: var(--header-active-menu-bg-color);

// =================================
// ==============Menu============
// =================================

// let -menu
$sider-dark-bg-color: var(--sider-dark-bg-color);
$sider-dark-darken-bg-color: var(--sider-dark-darken-bg-color);
$sider-dark-lighten-bg-color: var(--sider-dark-lighten-bg-color);

// trigger
$trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
$trigger-dark-bg-color: rgba(255, 255, 255, 0.1);



// =================================
// ==============动画函数-===========
// =================================

$ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
$ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
$ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
$ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
$ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
$ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
$ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
$ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
$ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);